<template>
    <div class="icons-nav">
        <div
            class="icons-item"
            v-for="(item,index) of iconsNavList"
            :key="index"
            @click="goPage(index)"
        >
            <div class="icons-bd">
                <img
                    class="icons-img"
                    :src="item.imgUrl"
                />
                <div class="icons-name">{{item.iconsName}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'IconsNav',
    props: ['userInfo'],
    data() {
        return {
            iconsNavList: [
                {
                    imgUrl: require('@/assets/images/home/icons-nav-1.png'),
                    iconsName: '白领防晒'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-2.png'),
                    iconsName: '白领护肤'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-3.png'),
                    iconsName: '白领彩妆'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-4.png'),
                    iconsName: '白领洗护'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-5.png'),
                    iconsName: '白领面膜'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-6.png'),
                    iconsName: '升级店主'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-7.png'),
                    iconsName: '白领排行榜'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-8.png'),
                    iconsName: '本周上新'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-9.png'),
                    iconsName: '地推物料'
                },
                {
                    imgUrl: require('@/assets/images/home/icons-nav-10.png'),
                    iconsName: '明星店主'
                }
            ]
        }
    },
    methods: {
        goPage(index) {
            switch (index) {
                case 0:
                    this.$router.push('/goodsList?goodsType=11')
                    break
                case 1:
                    this.$router.push('/goodsList?goodsType=13')
                    break
                case 2:
                    this.$router.push('/goodsList?goodsType=14')
                    break
                case 3:
                    this.$router.push('/goodsList?goodsType=15')
                    break
                case 4:
                    this.$router.push('/goodsList?goodsType=16')
                    break
                case 5:
                    this.$router.push('/experience')
                    break
                case 6:
                    this.commonDialog.alert('提示', '即将开放，敬请期待！')
                    break
                case 7:
                    this.commonDialog.alert('提示', '即将开放，敬请期待！')
                    break
                case 8:
                    this.commonDialog.alert('提示', '即将开放，敬请期待！')
                    break
                case 9:
                    this.$router.push('/star')
                    break
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.icons-nav
    display flex
    flex-wrap wrap
    background #fff
    .icons-item
        display flex
        align-items center
        justify-content center
        width 20%
        height 2.31rem
        .icons-bd
            text-align center
            .icons-img
                width 1.12rem
                height 1.12rem
            .icons-name
                margin-top 0.33rem
                font-size 0.33rem
                color #666
</style>
